<template>
	<z-paging ref="paging" @query="queryList" v-model="activityList"
	lower-threshold="300"
	show-loading-more-when-reload
	empty-view-text="暂无活动噢~"
	>
		<view class="container">
				<!-- 搜索组件 -->
				<activity-search 
				:current-status="currentStatus"
				@search="handleSearch"
				@filter="handleFilter">
			</activity-search>
			<!-- 骨架屏 -->
			<Skeleton v-if="loading" />

		
			
			<!-- 活动列表 -->
			<view class="activity-list" v-else>
				<view v-for="item in filteredActivityList" 
					  :key="item.id" 
					  class="activity-item" 
					  @click="goDetail(item)">
					<image :src="item.cover_image ? BASE_URL + item.cover_image : '/static/default/activity.png'" 
						   mode="aspectFill" 
						   class="cover"></image>
					<view class="info">
						<text class="title">{{item.title}}</text>
						<text class="desc">{{item.description}}</text>
						<text class="status">{{ getStatusText(item.status) }}</text>
						<view class="meta">
							<text :class="['status', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty" v-if="filteredActivityList.length === 0 && !loading">
				<text>暂无活动</text>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="filteredActivityList.length > 0 && !loading">
				<text v-if="loadMoreStatus === 'loading'">加载中...</text>
				<text v-else-if="loadMoreStatus === 'noMore'">没有更多了</text>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { ref } from 'vue'
import ActivitySearch from '@/components/activity-search.vue'
import Skeleton from '@/components/Skeleton.vue'
import { api } from '@/utils/request'

const BASE_URL = 'http://192.168.110.192:9003'

// 数据定义
const activityList = ref([]) // 原始活动列表
const filteredActivityList = ref([]) // 过滤后的活动列表
let page = ref(1)
let pageSize = ref(10)
let paging = ref(null)
const loadMoreStatus = ref('more')
const currentStatus = ref('') // 当前状态
const keyword = ref('')
const loading = ref(true) // 数据加载状态

const queryList = (pageNo, pageSizea) => {
	console.log("pageNo", pageNo, "pageSize", pageSizea);

	page.value = pageNo
	pageSize.value = pageSizea
	getActivityList();
}

// 获取活动列表
const getActivityList = async () => {
	try {
		const response = await uni.request({
			url: `${api.BASE_URL}/api/activity/list/`,
			method: 'GET',
			data: {
				page: page.value,
				page_size: pageSize.value,
				keyword: keyword.value
			}
		})
		
		const res = response.data
		
		if(res.code === 200) {
			// activityList.value = res.data.list
			paging.value.complete(res.data.list)
			filteredActivityList.value = res.data.list // 初始化过滤列表
		} else {
			uni.showToast({
				title: res.message || '获取活动列表失败',
				icon: 'none'
			})
		}
	} catch(e) {
		console.error(e)
		uni.showToast({
			title: '获取活动列表失败',
			icon: 'none'
		})
	} finally {
		loading.value = false; // 数据加载完成
	}
}

// 过滤活动列表
const filterActivityList = () => {
	if (currentStatus.value) {
		filteredActivityList.value = activityList.value.filter(item => item.status === currentStatus.value);
	} else {
		filteredActivityList.value = activityList.value; // 显示所有活动
	}
}

// 获取状态样式类
const getStatusClass = (status) => {
	switch(status) {
		case 'published': return 'active'
		case 'ended': return 'ended'
		case 'draft': return 'draft'
		default: return ''
	}
}

// 获取状态文本
const getStatusText = (status) => {
	switch(status) {
		case 'published': return '进行中'
		case 'ended': return '已结束'
		case 'draft': return '未发布'
		default: return '未知状态'
	}
}

// 搜索处理
const handleSearch = (value) => {
	keyword.value = value
	getActivityList(); // 重新获取活动列表
}

// 筛选处理
const handleFilter = (status) => {
	currentStatus.value = status;
	filterActivityList(); // 过滤活动列表
}

// 跳转详情
const goDetail = (item) => {
	if (item.status === 'published') {
		uni.navigateTo({
			url: `/pages/activity/detail?id=${item.id}`
		})
	} else {
		uni.showToast({
			title: `活动状态为 "${getStatusText(item.status)}"，无法查看详情。`,
			icon: 'none'
		})
	}
}


</script>

<style lang="scss">
.container {
	padding-bottom: 30rpx;
	
	.activity-list {
		padding: 20rpx;
		
		.activity-item {
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
			
			.cover {
				width: 100%;
				height: 300rpx;
			}
			
			.info {
				padding: 20rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
				}
				
				.desc {
					font-size: 28rpx;
					color: #666;
					margin: 10rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.status {
					font-size: 24rpx;
					color: #007AFF;
				}
				
				.meta {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 24rpx;
					
					.status {
						padding: 4rpx 12rpx;
						border-radius: 4rpx;
						
						&.active {
							background: #007AFF;
							color: #fff;
						}
						
						&.ended {
							background: #999;
							color: #fff;
						}
						
						&.draft {
							background: #f0ad4e;
							color: #fff;
						}
					}
				}
			}
		}
	}
	
	.empty {
		padding: 100rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
	
	.load-more {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0;
	}
}
</style>
